<template>
	<div class="container">
		<el-calendar v-model="calendar" class="my-calendar">
			<template #date-cell="{ data }">
				<div style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
					@click="handleSchedule(data)">
					<div style="margin-top: 15px;font-weight: 700;font-size: 20px;">
						{{ data.day.split('-').slice(2).join('-') }}
					</div>
					<div v-for="(item, index) in fromData">
						<div v-if="data.day == item.day">
							<div v-if="item.works.length == 1">
								<div v-for="(item1, index1) in item.works">
									<div style="display: flex;align-items: center;font-weight: 700;">
										<div>
											<div style="font-size:11px;height: 15px">{{ item1.classesName }}</div>
											<div style="font-size:11px;height: 15px">{{ item1.groupName }}</div>
										</div>
										<!-- <img style="width: 6px;height: 10px;margin-left: 8px;" src="/@/assets/mainright.png" /> -->
									</div>
									<div style="display: flex;align-items: center;height: 15px">
										<div style="font-size: 10px;">{{ item1.workStartTime }}</div>
										<div> - </div>
										<div style="font-size: 10px;">{{ item1.workEndTime }}</div>
									</div>
								</div>
							</div>
							<div v-if="item.works.length > 1">
								<div v-for="(item2, index2) in item.works">
									<div style="display: flex;align-items: center;font-weight: 700;">
										<div>{{ item2.classesName }}</div>
										<div> - </div>
										<div>{{ item2.groupName }}</div>
										<img style="width: 6px;height: 10px;margin-left: 8px;" src="/@/assets/mainright.png" />
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</template>
		</el-calendar>

	</div>

	<!-- 新增日程的表单 -->
	<!-- <schedule-form ref="scheduleFormRef" @refresh="initscheduleList(formatDate(calendar, 'YYYY-mm'))" /> -->
	<!-- 日程查询 -->
	<schedule ref="scheduleRef" @refresh="initscheduleList(props.username, formatDate(calendar, 'YYYY-mm'))" />
</template>

<script setup lang="ts" name="SysScheduleCalendar">
import { formatDate, parseDate } from '/@/utils/formatTime';
import { getuserwork } from '/@/api/personnel/userClasses'
const schedule = defineAsyncComponent(() => import('./form.vue'));
const scheduleRef = ref();
const calendar = ref(new Date());
const fromData = ref([]);
const time = ref();


const props = defineProps({
	username: {
		type: String
	}
})


onMounted(() => {
	initscheduleList(props.username, formatDate(calendar.value, 'YYYY-mm'));
});

// 监听日历日期变化并更新日程数据
watch(calendar, (val, oldval) => {
	const newVal = formatDate(val, 'YYYY-mm');
	const old = formatDate(oldval, 'YYYY-mm');
	if (newVal !== old) {
		initscheduleList(props.username, newVal);
	}
});
watch(props, (val, oldval) => {
	// console.log('props', props.username);
	initscheduleList(props.username, formatDate(calendar.value, 'YYYY-mm'));
});
/**
 * 初始化日程数据列表
 * @function
 * @param {string} date - YYYY-mm格式的日期字符串
 */
const initscheduleList = (username, date) => {
	getuserwork({
		username: username,
		day: `${date}-01`,
	}).then((res) => {
		fromData.value = res.data;
	});
};

/**
 * 处理日程安排事件，若当前日期下没有日程则打开表单对话框，否则打开日程详情页面
 * @function
 * @param {object} data - 当前单元格包含的日期信息
 */
const handleSchedule = (data) => {
	const index = fromData.value.findIndex(item => item.day === data.day);
	if (index != -1 && data.id != "") {

		if (fromData.value[index].works.length > 0) {
			scheduleRef.value.openDialog({ data: fromData.value[index] });
		}

	}
};

const someMethod = () => {
	// console.log('props.username', props.username);

	initscheduleList(props.username, formatDate(calendar.value, 'YYYY-mm'));
}

// 打开弹窗
const openDialogs = (id: string) => {
	someMethod()
}

// 暴露变量
defineExpose({
	openDialogs
});
</script>

<style lang="scss">
.notice-bar-warp-right-icon {
	width: 24px;
	text-align: right;
	font-size: inherit !important;

	&:hover {
		cursor: pointer;
	}
}

.el-calendar-table .el-calendar-table__row .el-calendar-day {
	height: 88px;
}
</style>
